<template>
    <div class="container">
        <div class="card">
          <el-breadcrumb separator="/" class="card-body">
            <el-breadcrumb-item :to="{ path: '/AdminHome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="card">
            <div class="card-header">涉密信息系统电脑及网络维修申请</div>
            <div class="card-body">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                    <div class="info-ruleForm">
                        <el-form-item label="申请人" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="所属部门" prop="group">
                            <el-input v-model="ruleForm.group"></el-input>
                            <el-button type="text" size="medium" class="del-query-tree-btn" @click="dialogVisible = true">查找</el-button>
                        </el-form-item>
                        <el-form-item label="申请时间" prop="time">
                            <el-input v-model="ruleForm.time"></el-input>
                        </el-form-item>
                        <el-form-item label="工号" prop="pNumber">
                            <el-input v-model="ruleForm.pNumber"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式" prop="contant">
                            <el-input v-model="ruleForm.contant"></el-input>
                        </el-form-item>
                        <el-form-item label="资产编号" prop="number">
                            <el-input v-model="ruleForm.number"></el-input>
                        </el-form-item>
                        <el-form-item label="故障描述" prop="department">
                            <el-input type="textarea" v-model="ruleForm.department"></el-input>
                        </el-form-item>
                        
                    </div>

                    <hr>

                    <div class="item-in-asstes">
                      <el-table :data="tableData">
                          <el-table-column prop="date" label="设备名称">
                          </el-table-column>
                          <el-table-column prop="name" label="设备编号" width="180">
                          </el-table-column>
                          <el-table-column prop="address" label="设备规格">
                          </el-table-column>
                          <el-table-column prop="amount" label="数量" width="180">
                          </el-table-column>
                      </el-table>
                    </div>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即申请</el-button>
                        <el-button @click="back()">返回</el-button>
                    </el-form-item>
                </el-form>                
            </div>
        </div>
        <!-- 隐藏查找窗口 -->
        <el-dialog title="查找部门" :visible.sync="dialogVisible" :append-to-body='true' width="300px">
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  name: "addProcess",
  data() {
    return {
      ruleForm: {
        name: "王小虎",
        number: "ZC-0023",
        pNumber: "0123",
        contant: "15008421656",
        group: "研发部",
        department: "系统经常性死机,无故重启.",
        time:"2019-04-11",
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 12, message: "长度在 2 到 12 个字符", trigger: "blur" }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        chinaID: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            min: 10,
            max: 18,
            message: "请输入正确的身份证号码",
            trigger: "blur"
          }
        ],
        jobID: [
          { required: true, message: "请输入工号", trigger: "blur" },
          { min: 3, max: 15, message: "请输入正确的工号", trigger: "blur" }
        ],
        authorizationList: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个权限",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      },
      imageUrl: "",
      dialogVisible: false,
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1"
                }
              ]
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1"
                }
              ]
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      tableData: [
        {
          date: "思科三层交换机 SC-2323",
          name: "SB-323342",
          address: "24口 万兆交换机",
          amount:1
        },
        {
          date: "中兴ZXR10",
          name: "SB-3233242",
          address: "企业级路由器，多业务路由器 传输速率：10000/40000/100000Mbps",
          amount:1
        },
        {
          date: "杰和GCR2524MP-RF",
          name: "SB-323342",
          address: "Intel 至强E5 v3/v4 /16G SATA/SAS/SSD/NVMe SSD",
          amount:1
        },
        {
          date: "华为FusionServer RH2288 V3",
          name: "SB-323342",
          address: "E5 v3芯动力 V3服务器",
          amount:1
        }
      ]
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("提交申请成功,请等待下一级审批!");
          console.log(this.ruleForm);
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleNodeClick(data) {
      console.log(data);
    },
    back() {
      this.$router.go(-1); //返回上一层
    }
  },
  mounted() {
    console.error(this.$route.query);
  }
};
</script>
<style scoped>
.info-ruleForm {
    width: 420px;
    position: relative;
}

.login-log {
    position: absolute;
    right: 0;
    top: 0;
    border-left: 1px solid #f6f6f6;
    border-bottom: 1px solid #f6f6f6;
    color: #999;
    border-radius: 0 0 0 3px;
}

.login-log p {
    padding: 5px 2rem;
    margin-bottom: 5px;
    margin-top: 0;
}

.login-log h4 {
    padding: 5px 2rem;
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 16px;
    color: #333;
}

.login-log hr {
    margin: 0;
}

.authList {
    border: 1px solid #f2f2f2;
    padding: 0.5rem 1rem;
}

.del-query-tree-btn {
    position: absolute;
    right: -40px;
    top: 0;
}

.item-in-asstes {
    padding-bottom: 2rem;
}

</style>